<%@ include file="includes/include.jsp" %>

<jsp:include page="includes/header.jsp">
  <jsp:param name="pageTitle" value="Directory" />
</jsp:include>

<style type="text/css">
  a, h2 {
    color: #0566cc;
  }
  .column {
    float: left;
    width: 305px;
  }
  .column h3 {
    border: none;
    color: #333333;
    font-size: 13pt;
    font-weight: normal;
    margin: 15px 0px 5px 0px;
    padding: 0;
  }
  .column ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
  }
  .column li {
    font-size: 10pt;
  }
  .column a {
    text-decoration: none;
  }
  .column a:hover {
    text-decoration: underline;
  } 
  .column-spacer {
    float: left;
    width: 12px;
  }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/static/json2.js"></script>
<script type="text/javascript">
  var gtugs = {
    map: null,
    activeInfoWindow: null,
    GTUG_MARKER: '/static/gtugmarker.png',
    MARKER_SHADOW: '/static/markershadow.png'
  };

  window.onload = function() {
    gtugs.map = new google.maps.Map(document.getElementById("map"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(14, 0),
        zoom: 2,
        mapTypeControl: false,
        scrollwheel: false
    });

    new core.AjaxRequest('GET', '/chapters', function(json) {
        var chapters = JSON.parse(json).chapters;
        for (var i = 0; i < chapters.length; i++) {
          var chapter = chapters[i];

          var coordinates = new google.maps.LatLng(chapter.latitude,
              chapter.longitude);
          var shadow = new google.maps.MarkerImage(gtugs.MARKER_SHADOW,
              new google.maps.Size(37, 34), new google.maps.Point(0,0),
              new google.maps.Point(9, 34));

          var marker = new google.maps.Marker({
              map: gtugs.map,
              title: chapter.name,
              position: coordinates,
              icon: gtugs.GTUG_MARKER,
              shadow: shadow
          });

          var html = [];
          html.push('<div style="border-bottom:solid black 1px; font-size:14px; font-weight:bold">');
          html.push(chapter.name);
          html.push('</div><div style="font-size:12px">Status: <em>');
          html.push(chapter.status);
          html.push('</em></div><ul><li><a href="/chapter.jsp?id=');
          html.push(chapter.id);
          html.push('">Chapter profile</a></li>');
          if (chapter.website != null) {
            html.push('<li><a href="');
            html.push(chapter.website);
            html.push('">Website</a></li>');
          }
          html.push('</ul>');
          var infoWindow = new google.maps.InfoWindow({
              content: html.join('')
          })

          google.maps.event.addListener(marker, 'click',
              gtugs.openInfoWindow(infoWindow, marker));
        }
      }).send();
  };

  gtugs.openInfoWindow = function(infoWindow, marker) {
    return function() {
      if (gtugs.activeInfoWindow != null) {
        gtugs.activeInfoWindow.close();
      }

      infoWindow.open(gtugs.map, marker);
      gtugs.activeInfoWindow = infoWindow;
    };
  }
</script>

<div id="title">
  <h2>Directory</h2>
</div>

<div id="map" style="border:solid #0566cc 1px; height:330px; width:100%"></div>



<div style="background-color:#eee; border:solid silver 1px; margin-top:15px; padding:2px 5px">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td style="padding-right:10px">
        <img src="/static/babyblocks-48.gif" style="width:20px"/>
      </td>
      <td style="font-size:9pt">
        Chapter is incubating &ndash; for more on chapter status requirements, see the <a href="http://wiki.gtugs.org/chapter-status">wiki</a>.
      </td>
    </tr>
  </table>
</div>

<c:forEach items="${model.columns}" var="column" varStatus="columnRow">
  <c:if test="${columnRow.index != 0}">
    <div class="column-spacer">&nbsp;</div>
  </c:if>
  <div class="column">
    <c:forEach items="${column}" var="country">
      <c:forEach items="${country}" var="chapter" varStatus="chapterRow">
        <c:if test="${chapterRow.index == 0}">
          <h3><c:out value="${chapter.country}"/></h3>
          <ul>
        </c:if>
        <li>
          <b>&rarr;</b> <a href="/chapter.jsp?id=<c:out value="${chapter.id}"/>"><c:out value="${chapter.name}"/></a>
          <%--
          <c:if test="${chapter.status eq 'incubating'}">
            <img src="/static/labs_icon.ico" style="height:12px; width:12px"/>
            (I)
          </c:if>
          --%>
          <c:if test="${chapter.status eq 'incubating'}">
            <img src="/static/babyblocks-12.gif" alt="incubating" title="incubating"/>
          </c:if>
        </li>
      </c:forEach>
      </ul>
    </c:forEach>
  </div>
</c:forEach>
<br style="clear:both"/>

<%@ include file="includes/footer.jsp" %>